var nameItem = {
    data: function () {
        return {
            queryKeys: "/keys",
            queryValue: "/get",
            key: "",
            data: [],
            dataKey: []
        }
    },
    template: '<div>\n' +
        '<div class="panel panel-default table-list">\n' +
        '<div class="panel-heading">' +
        '   <input class="form-control" v-model="key">\n' +
        '</div>' +
        '    <div class="panel-body">\n' +
        '        <div class="btn item" v-for="item in dataKey" @click="queryColumn(item)" :ref="item">{{item}}</div>\n' +
        '    </div>\n' +
        '</div>\n' +
        '</div>',
    beforeMount: function () {
        this.loadData();
    },
    watch: {
        key: function () {
            this.reset();
        }
    },
    methods: {
        loadData: function () {
            var _ = this;
            axios.get(_.queryKeys+'?key=*')
                .then(function (response) {
                    _.reset();
                    _.data = _.dataKey = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        reset: function () {
            var _ = this;
            _.dataKey = [];
            for (var i = 0; i < _.data.length; i++) {
                var d = _.data[i];
                if (d.indexOf(_.key) > -1 || "" == _.key) {
                    _.dataKey.push(d);
                }
            }
            for (var item in _.$refs) {
                if (_.$refs[item].length > 0) {
                    _.$refs[item][0].classList.remove("btn-success");
                }
            }
        }
    }
};